<template>
    <transition name=slide>
        <div class="food-container" ref="foodContainer">
            <div class="food-content">
                <div class="image-header">
                    <img :src="food.image">
                    <div class="back" @click="back">
                        <i class="icon-arrow_lift"></i>
                    </div>
                </div>
                <div class="content">
                    <h1 class="name">{{food.name}}</h1>
                    <div class="detail">
                        <span class="sell-count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
                    </div>
                    <div class="info">
                        <div class="price">
                            <span class="new">￥{{food.price}}</span><span class="old" >￥8</span>
                        </div>
                        <div class="add-car" v-if="!food.count" ref="addCar" @click="addCount">加入购物车</div>
                        <div class="car-control" v-else>
                            <carcontrol :food="food" @add="appendFood"></carcontrol>
                        </div>
                    </div>
                </div>
                <split></split>
                <div class="desc" v-show="food.info">
                    <h1 class="head">商品介绍</h1>
                    <div class="info">{{food.info}}</div>
                </div>
                <split v-show="food.info"></split>
                <div class="food-rating">
                    <h1 class="head">商品评价</h1>
                    <ratingselect @select="filterCondition" :ratingObj="ratingObj" :desc="desc"></ratingselect>
                    <ul class="rating-list">
                        <li class="rating-item" v-for="rating in currentRatings" :key="rating.rateTime">
                            <div class="user-info">
                                <div class="time">{{rating.rateTime | dataFilter}}</div>
                                <div class="user">
                                    <span class="username">{{rating.username}}</span><img class="avatar" :src="rating.avatar" width="12" height="12">
                                </div>
                            </div>
                            <div class="assess">
                                <i :class="{'icon-thumb_down': rating.rateType===1, 'icon-thumb_up': rating.rateType===0}"></i><span class="assess-content">{{rating.text}}</span>
                            </div>
                        </li>
                        <li class="no-commend" v-show="!currentRatings.length">暂时没有评论</li>
                    </ul>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
import split from 'components/split/split.vue'
import ratingselect from 'components/ratingSelect/ratingSelect.vue'
import carcontrol from 'components/carcontrol/carcontrol.vue'
import BScroll from 'better-scroll'
import {formatDate} from 'common/js/date.js'
import Vue from 'vue'

const ALL = 0
const COMMEND = 1

const COMPLAIN = 2
export default {
    props: {
        food: {
            type: Object
        }
    },
    data () {
        return {
            desc: {
                all: '全部',
                commend: '推荐',
                complain: '吐槽'
            },
            ratingObj: {
                allCount: 0,
                commendCount: 0,
                complainCount: 0
            },
            currentRatings: this.food.ratings.slice(),
            allRating: this.food.ratings.slice(),
            commendRating: [],
            complainRating: []
        }
    },
    created() {
        this.$nextTick(() => {
            if (!this.scroll) {
                this.scroll = new BScroll(this.$refs.foodContainer, {
                    click: true
                })
            } else {
                this.scroll.refresh()
            }
        })
        this._initRatingObj()
    },
    methods: {
        back() {
            this.$emit('back', false)
        },
        appendFood(target) {
            this.$emit('add', target)
        },
        addCount() {
            if (!this.food.count) {
                Vue.set(this.food, 'count', 1)
                this.appendFood(this.$refs.addCar)
            }
        },
        filterCondition(selectType) {
            let arr = []
            switch (selectType.type) {
                case ALL: 
                    arr = this.allRating.slice()
                    break
                case COMMEND:
                    arr = this.commendRating.slice()
                    break
                case COMPLAIN:
                    arr = this.complainRating.slice()
                    break
            }
            if (selectType.checked) {
                arr = this._filterContent(arr.slice())
            }
            this.currentRatings.splice(0)
            while (arr.length) {
                this.currentRatings.push(arr.pop())
            }
        },
        _filterContent(arrs) {
            if (arrs.length) {
                let arr = arrs.filter((item) => {
                    if (item.text !== '' || item.text) {
                        return item
                    }
                })
                return arr
            }
            return []
        },
        _initRatingObj() {
            this.allRating = this.food.ratings
            this.commendRating = this._filterRatings(0)
            this.complainRating = this._filterRatings(1)
            this.ratingObj['allCount'] = this.food.ratings.length
            this.ratingObj['commendCount'] = this.commendRating.length
            this.ratingObj['complainCount'] = this.complainRating.length
        },
        _selectContent(onlyContent) {

        },
        _filterRatings(type) {
            let arr = []
            if (this.food.ratings.length) {
                arr = this.food.ratings.filter((item) => {
                    if (item.rateType === type) {
                        return item
                    }
                })
                return arr
            }
            return []
        }
    },
    filters: {
        dataFilter(time) {
            return formatDate(time, 'yyyy-MM-dd hh:mm')
        }
    },
    components: {
        split,
        ratingselect,
        carcontrol
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.food-container
    position: fixed
    top: 0
    bottom: 50px
    width: 100%
    background: white
    overflow: hidden
    &.slide-enter
        transform: translate3d(100%, 0, 0)
    &.slide-enter-active
        transition: transform .3s ease
    &.slide-leave-active
        transition: transform .3s ease
    &.slide-leave-to
        transform: translate3d(100%, 0, 0)
    .image-header
        position: relative
        width: 100%
        height: 0
        padding-top: 100%
        img
            position: absolute
            top: 0
            left: 0
            width: 100%
            height: 100%
        .back
            position: absolute
            top: 18px
            left: 18px
            .icon-arrow_lift
                color: white
                font-size: 14px
                font-weight: 700
    .content
        padding: 18px
        .name
            font-size: 14px
            font-weight: 700
            color: rgb(7, 17, 27)
            line-height: 14px
            margin-bottom: 8px
        .detail
            font-size: 10px
            color: rgb(147, 153, 159)
            line-height: 10px
            margin-bottom: 18px
            .sell-count
                margin-right: 12px
        .info
            position: relative
            display: flex
            align-items: center
            justify-content: space-between
            .price
                .new
                    font-weight: 700
                    font-size: 14px
                    color: rgb(240, 20, 20)
                    line-height: 24px
                    margin-right: 8px
                .old
                    font-weight: 700
                    font-size: 10px
                    color: rgb(147, 153, 159)
                    line-height: 24px
                    text-decoration: line-through
            .add-car
                width: 74px
                height: 24px
                font-size: 10px
                color: white
                line-height: 24px
                border-radius: 24px
                text-align: center
                background: rgb(0, 160, 220)
            .car-control
                position: absolute
                bottom: 0
                right: 0

    .desc
        padding: 18px
        .head
            font-size: 14px
            color: rgb(7, 17, 27)
            margin-bottom: 6px
            font-weight: 700
        .info
            padding: 8px
            font-size: 12px
            font-weight: 200
            color: rgb(77, 85, 93)
            line-height: 24px
    .food-rating
        padding-top: 18px
        .head
            padding-left: 18px
            font-size: 14px
            color: rgb(7, 17, 27)
            font-weight: 700
        .rating-list
            padding: 0 18px
            .rating-item
                padding: 16px 0
                color: rgb(147, 153, 159)
                border-bottom: 1px solid rgba(7, 17, 27, 0.1)
                .user-info
                    display: flex
                    justify-content: space-between
                    font-size: 10px
                    align-items: center
                    line-height: 12px
                    margin-bottom: 6px
                    .user
                        vertical-align: top
                        .username
                            margin-right: 6px
                        .avatar
                            vertical-align: top
                            border-radius: 50%
                .assess
                    font-size: 12px
                    .icon-thumb_down, .icon-thumb_up
                        line-height: 24px
                        margin-right: 4px
                    .icon-thumb_up
                        color: rgb(0, 160, 220)
                    .assess-content
                        color: rgb(7, 17, 27)
                        line-height: 16px
            .no-commend
                padding: 8px 0
                color: rgb(147, 153, 159)
                font-size: 14px

</style>
